<template>
  <div id="home">
    <div class="left">
      <sideBar></sideBar>
    </div>
    <div class="right">
      <div class="head">切换版心内容</div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import sideBar from "@com/sideBar.vue";
export default {
  name: "home",
  components: {
    sideBar,
  },
};
</script>
<style lang="less" scoped>
#home {
  height: 100%;
  .left {
    float: left;
    width: 220px;
    height: 100%;
  }
  .right {
    float: left;
    width: calc(100% - 220px);
    .head {
      line-height: 50px;
      padding-left: 20px;
      color: #fff;
      background: #515167;
      border-left: 1px solid rgba(0, 0, 0, 0.5);
    }
  }
}
</style>